<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phira 服务器控制面板</title>
    <style>
        /* 基础样式与重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            color: #ffffff;
            background-color: #0d0d0d;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* 背景图样式 */
        .parallax-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
                              url('https://webstatic.cn-nb1.rains3.com/5712%C3%973360.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 0;
        }

        /* 头部导航栏 */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1.5rem;
            backdrop-filter: blur(12px);
            background: rgba(0, 0, 0, 0.4);
            z-index: 1000;
            box-sizing: border-box;
        }
        
        .logo-nav-container {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        #logo-img {
            height: 32px;
            margin-right: 1.2rem;
        }
        
        .nav-links {
            display: flex;
        }
        
        .nav-links a {
            color: #eee;
            margin-right: 1.2rem;
            text-decoration: none;
            transition: 0.3s;
            font-size: 0.95rem;
        }
        
        .nav-links a:hover {
            color: #fff;
            text-shadow: 0 0 4px #fff;
        }
        
        .user-section {
            display: flex;
            justify-content: flex-end;
            flex: 1;
        }
        
        .glass-button {
            display: flex;
            align-items: center;
            padding: 0.4rem 1rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 100px;
        }
        
        .glass-button:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            position: relative;
            cursor: pointer;
            width: 100%;
        }
        
        .username {
            margin-right: 0.8rem;
            font-size: 0.95rem;
            color: #eee;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .dropdown-content {
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(12px);
            border-radius: 8px;
            padding: 0.8rem;
            min-width: 160px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.5);
            z-index: 1001;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dropdown-content.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .dropdown-content span {
            display: block;
            padding: 0.3rem 0.5rem;
            font-weight: bold;
            color: #ffd700;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 0.5rem;
        }
        
        .dropdown-content a {
            display: block;
            padding: 0.5rem;
            color: #eee;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .dropdown-content a:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        /* 主内容区 */
        main {
            position: relative;
            z-index: 2;
            padding-top: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            padding-bottom: 50px;
        }

        /* 3D毛玻璃卡片 */
        .admin-container {
            transform-style: preserve-3d;
            transform: translateZ(20px);
            transition: transform 0.3s ease;
            animation: gentleSway 8s infinite ease-in-out;
            width: 95%;
            max-width: 1200px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            backdrop-filter: blur(12px);
            padding: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin: 1rem;
        }

        @keyframes gentleSway {
            0%, 100% { transform: translateZ(20px) rotateX(0.5deg) rotateY(0.5deg); }
            25% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(-1deg); }
            50% { transform: translateZ(20px) rotateX(0.5deg) rotateY(1deg); }
            75% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(0.5deg); }
        }

        .admin-container.tilting {
            animation: none;
            transition: transform 0.1s linear;
        }
        
        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .admin-title {
            font-size: 2rem;
            color: #ffd700;
        }

        /* 卡片容器 */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        /* 状态卡片 */
        .glass-card {
            backdrop-filter: blur(12px);
            background: rgba(30, 30, 42, 0.25);
            border-radius: 16px;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-5px);
        }

        .glass-card h1, .glass-card h2 {
            margin-bottom: 1.2rem;
            font-weight: 500;
        }

        .status-card {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .status-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #666;
            display: inline-block;
            margin-right: 10px;
        }

        #serverStatusContainer {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        /* 控制按钮 */
        .control-buttons {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
        }

        .glass-button-control {
            padding: 0.8rem 1.5rem;
            backdrop-filter: blur(5px);
            background: rgba(80, 90, 200, 0.25);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            min-width: 100px;
            text-align: center;
        }

        .glass-button-control:hover {
            background: rgba(100, 110, 220, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* 自定义命令 */
        .cmd-input {
            display: flex;
            gap: 10px;
        }

        #customCommand {
            flex: 1;
            padding: 0.8rem;
            background: rgba(30, 30, 42, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            color: white;
        }

        #customCommand::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        /* 输出卡片 */
        .output-card {
            grid-column: 1 / -1;
        }

        #commandOutput {
            min-height: 200px;
            max-height: 400px;
            overflow: auto;
            padding: 1rem;
            background: rgba(20, 20, 30, 0.4);
            border-radius: 8px;
            font-family: 'Consolas', 'Courier New', monospace;
            white-space: pre-wrap;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* 状态颜色 */
        .status-online {
            background-color: #4caf50;
        }
        .status-offline {
            background-color: #f44336;
        }
        .status-loading {
            background-color: #ffc107;
        }

        /* 消息提示 */
        .message {
            padding: 0.8rem;
            border-radius: 8px;
            margin: 1rem 0;
            text-align: center;
            display: none;
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .message-success {
            background: rgba(0, 200, 0, 0.2);
            color: #0f0;
        }
        
        .message-error {
            background: rgba(200, 0, 0, 0.2);
            color: #f33;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            header {
                flex-wrap: wrap;
            }
            .logo-nav-container {
                flex: 0 0 100%;
                margin-bottom: 0.5rem;
            }
            .user-section {
                flex: 0 0 100%;
                justify-content: flex-end;
            }
            .nav-links a {
                margin-right: 1rem;
            }
            .username {
                max-width: 80px;
            }
            .control-buttons {
                flex-direction: column;
            }
            .cards-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="parallax-bg"></div>
    
    <header>
        <div class="logo-nav-container">
            <img id="logo-img" src="logo.png" alt="logo" />
            <div class="nav-links">
                <a href="index.html">主页</a>
                <a href="rooms.html">房间列表</a>
                <a href="account.html">账号管理</a>
                <a href="admin.html" style="color: #ffd700;">管理员控制台</a>
            </div>
        </div>
        
        <div class="user-section">
            <div id="avatar-container" class="glass-button">
                <div class="user-info" onclick="toggleDropdown()">
                    <span class="username" id="username-display"></span>
                    <img id="user-avatar" src="" alt="用户头像" class="user-avatar" />
                </div>
                <div class="dropdown-content" id="user-dropdown">
                    <span id="dropdown-username"></span>
                    <a id="phira-profile-link" target="_blank">我的Phira账户</a>
                    <a href="account.html">账号管理</a>
                    <a href="javascript:void(0)" onclick="logout()">退出登录</a>
                </div>
            </div>
        </div>
    </header>
    
    <main>
        <div class="admin-container">
            <div class="admin-header">
                <h1 class="admin-title">服务器控制面板</h1>
            </div>
            
            <div id="admin-message" class="message"></div>
            
            <div class="cards-container">
                <!-- 服务器状态卡片 -->
                <div class="glass-card status-card">
                    <h2>服务器状态</h2>
                    <div id="serverStatusContainer">
                        <div class="status-dot" id="serverStatusDot"></div>
                        <span id="serverStatus">检测中...</span>
                    </div>
                    <div style="display: flex; justify-content: center; width: 100%;">
                        <button id="refreshStatus" class="glass-button-control">刷新状态</button>
                    </div>
                </div>
                
                <!-- API状态卡片 -->
                <div class="glass-card status-card">
                    <h2>API状态</h2>
                    <div id="apiStatusContainer">
                        <div class="status-dot" id="apiStatusDot"></div>
                        <span id="apiStatus">检测中...</span>
                    </div>
                </div>
                
                <!-- 服务控制卡片 -->
                <div class="glass-card control-card">
                    <h2>服务控制</h2>
                    <div class="control-buttons">
                        <button id="startServer" class="glass-button-control">启动</button>
                        <button id="restartServer" class="glass-button-control">重启</button>
                        <button id="stopServer" class="glass-button-control">关闭</button>
                    </div>
                </div>
                
                <!-- 自定义命令卡片 -->
                <div class="glass-card custom-cmd-card">
                    <h2>自定义命令</h2>
                    <div class="cmd-input">
                        <input type="text" id="customCommand" placeholder="输入命令...">
                        <button id="executeCmd" class="glass-button-control">执行</button>
                    </div>
                </div>
                
                <!-- 命令输出卡片 -->
                <div class="glass-card output-card">
                    <h2>命令执行结果</h2>
                    <pre id="commandOutput">等待命令执行...</pre>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 全局变量
        let currentUser = null;
        const API_BASE_URL = 'https://phira.htadiy.cc/postadmin';
        const API_PWD1 = 'nb3502022';
        const API_PWD2 = '2022350';
        const API_PWD3 = 'nb3502022outlookcom';
        
        // 状态颜色常量
        const STATUS_COLORS = {
            online: '#4caf50',
            offline: '#f44336',
            loading: '#ffc107',
            unknown: '#9e9e9e'
        };
        
        // 脚本命令配置
        const SERVER_COMMANDS = {
            start: 'bash /root/start.sh',
            restart: 'bash /root/stop.sh && bash /root/start.sh',
            stop: 'bash /root/stop.sh',
            check: 'bash /root/check.sh'
        };
        
        // 页面加载时检查登录状态和管理员权限
        document.addEventListener('DOMContentLoaded', () => {
            const savedUser = localStorage.getItem('user');
            if (savedUser) {
                currentUser = JSON.parse(savedUser);
                
                // 检查是否为管理员
                if (currentUser.admin !== "yes") {
                    showAdminMessage('您不是管理员，无法访问此页面', false);
                    setTimeout(() => {
                        window.location.href = 'index.html';
                    }, 2000);
                    return;
                }
                
                updateUserDisplay();
                checkAllStatus();
            } else {
                // 未登录，重定向到登录页
                showAdminMessage('请先登录', false);
                setTimeout(() => {
                    window.location.href = 'index.html';
                }, 1500);
            }
            
            // 绑定事件监听器
            document.getElementById('refreshStatus').addEventListener('click', checkAllStatus);
            document.getElementById('startServer').addEventListener('click', () => executeServerCommand('start'));
            document.getElementById('restartServer').addEventListener('click', () => executeServerCommand('restart'));
            document.getElementById('stopServer').addEventListener('click', () => executeServerCommand('stop'));
            document.getElementById('executeCmd').addEventListener('click', executeCustomCommand);
            
            // 按Enter键执行自定义命令
            document.getElementById('customCommand').addEventListener('keyup', (e) => {
                if (e.key === 'Enter') executeCustomCommand();
            });
        });
        
        // 更新用户显示
        function updateUserDisplay() {
            if (currentUser) {
                document.getElementById('username-display').textContent = currentUser.name;
                document.getElementById('user-avatar').src = currentUser.image_url || 'https://phira.moe/assets/user-6212ee95.png';
                document.getElementById('dropdown-username').textContent = currentUser.name;
                document.getElementById('phira-profile-link').href = `https://phira.5wyxi.com/user/${currentUser.phira_id}`;
            }
        }
        
        // 切换下拉菜单
        function toggleDropdown() {
            const dropdown = document.getElementById('user-dropdown');
            if (dropdown) {
                dropdown.classList.toggle('show');
            }
        }
        
        // 退出登录
        function logout() {
            localStorage.removeItem('user');
            window.location.href = 'index.html';
        }
        
        // 显示管理员消息
        function showAdminMessage(message, isSuccess) {
            const messageElement = document.getElementById('admin-message');
            messageElement.textContent = message;
            messageElement.className = `message ${isSuccess ? 'message-success' : 'message-error'}`;
            messageElement.style.display = 'block';
            
            // 5秒后隐藏消息
            setTimeout(() => {
                messageElement.style.display = 'none';
            }, 5000);
        }
        
        // 检查所有状态
        function checkAllStatus() {
            checkApiStatus();
            checkServerStatus();
        }
        
        // 检查API状态（service.htadiy.cc/rooms）
        function checkApiStatus() {
            updateApiStatus('检测中...', 'loading');
            
            fetch('https://phira.htadiy.cc/roomsjson', {
                method: 'GET',
                cache: 'no-store'
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('API响应错误');
                }
                return response.json();
            })
            .then(data => {
                // 检查返回内容是否有数据
                if (Array.isArray(data) && data.length > 0) {
                    updateApiStatus('在线', 'online');
                } else {
                    updateApiStatus('在线', 'online');
                }
            })
            .catch(() => {
                updateApiStatus('离线', 'offline');
            });
        }
        
        // 更新API状态显示
        function updateApiStatus(text, status) {
            const apiStatusText = document.getElementById('apiStatus');
            const apiStatusDot = document.getElementById('apiStatusDot');
            
            apiStatusText.textContent = text;
            apiStatusDot.style.backgroundColor = STATUS_COLORS[status] || STATUS_COLORS.unknown;
        }
        
        // 检查服务器状态（使用bash /root/check.sh命令）
        function checkServerStatus() {
            updateServerStatus('检测中...', 'loading');
            
            // 发送检查命令到API
            sendAuthenticatedCommand('custom', SERVER_COMMANDS.check)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('服务器响应错误');
                    }
                    return response.json(); // 尝试解析为JSON
                })
                .then(data => {
                    // 检查返回结果中是否有错误
                    if (data.status === "success") {
                        updateServerStatus('运行中', 'online');
                    } else {
                        updateServerStatus('已停止', 'offline');
                    }
                })
                .catch(() => {
                    // 所有错误情况都视为服务器停止
                    updateServerStatus('已停止', 'offline');
                });
        }
        
        // 更新服务器状态显示
        function updateServerStatus(text, status) {
            const serverStatusText = document.getElementById('serverStatus');
            const serverStatusDot = document.getElementById('serverStatusDot');
            
            serverStatusText.textContent = text;
            serverStatusDot.style.backgroundColor = STATUS_COLORS[status] || STATUS_COLORS.unknown;
        }
        
        // 创建并发送带身份验证参数的请求
        function sendAuthenticatedCommand(command, customCmd = null) {
            const params = new URLSearchParams();
            params.append('pwd1', API_PWD1);
            params.append('pwd2', API_PWD2);
            params.append('pwd3', API_PWD3);
            
            if (customCmd) {
                params.append('cmd', 'custom');
                params.append('custom_cmd', customCmd);
            } else {
                params.append('cmd', command);
            }
            
            return fetch(`${API_BASE_URL}/execute`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params
            });
        }
        
        // 执行服务器控制命令（使用bash脚本）
        function executeServerCommand(commandType) {
            if (!SERVER_COMMANDS[commandType]) return;
            
            const commandOutput = document.getElementById('commandOutput');
            commandOutput.textContent = '执行中...';
            
            // 直接发送自定义的bash脚本命令
            sendAuthenticatedCommand('custom', SERVER_COMMANDS[commandType])
                .then(response => {
                    if (response.ok) {
                        return response.text();
                    } else {
                        throw new Error('服务器响应错误');
                    }
                })
                .then(data => {
                    commandOutput.textContent = data;
                    // 执行完成后重新检查状态
                    setTimeout(() => {
                        checkServerStatus();
                    }, 2000);
                })
                .catch(error => {
                    commandOutput.textContent = `错误: ${error.message || '执行失败'}`;
                });
        }
        
        // 执行自定义命令
        function executeCustomCommand() {
            const command = document.getElementById('customCommand').value.trim();
            const commandOutput = document.getElementById('commandOutput');
            
            if (!command) {
                commandOutput.textContent = '错误：请输入命令';
                return;
            }
            
            commandOutput.textContent = '执行中...';
            
            // 直接发送自定义命令
            sendAuthenticatedCommand('custom', command)
                .then(response => {
                    if (response.ok) {
                        return response.text();
                    } else {
                        throw new Error('服务器响应错误');
                    }
                })
                .then(data => {
                    commandOutput.textContent = data;
                    document.getElementById('customCommand').value = '';
                })
                .catch(error => {
                    commandOutput.textContent = `错误: ${error.message || '执行失败'}`;
                });
        }
    </script>
</body>
</html>